<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html lang="cn" class="app">
<head>
    <title>后台管理 - 文章表</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    <link rel="stylesheet" href="${ctxStatic}/js/jPlayer/jplayer.flat.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/simple-line-icons.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/app.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/js/ztree/css/zTreeStyle.css" />
    <link rel="stylesheet" href="${ctxStatic}/js/chosen/chosen.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/js/layui/css/layui.css">
    <!--[if lt IE 9]>
    <script src="${ctxStatic}/js/ie/html5shiv.js"></script>
    <script src="${ctxStatic}/js/ie/respond.min.js"></script>
    <script src="${ctxStatic}/js/ie/excanvas.js"></script>
    <![endif]-->
</head>

<body>
<section class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-12">
            <!-- 引导开始 -->
            <ul class="breadcrumb">
                <li><a href="${ctx}/welcome"><i class="fa fa-home"></i> 主页</a></li>
                <li>文章管理</li>
                <li class="active">文章发布</li>
                <li class="active">文章编辑</li>
            </ul>
            <!-- 引导结束 -->
        </div>
    </div>
    <form id="cmsArticleForm" class="bs-example form-horizontal" method="post" >
        <%--基本信息--%>
        <section class="panel panel-default">
            <header class="panel-heading font-bold">文章编辑</header>

            <div class="panel-body">
                <input type="hidden" name="id" value="${cmsArticle.id}"/>
                <div class="form-group">
                    <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>栏目编号：</label>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <input id="categoryId" type="hidden" class="form-control" name="categoryId"  value="${cmsArticle.categoryId}" required />
                        <input id="categoryNm" type="text" class="form-control" name="categoryNm"  value="${cmsArticle.categoryNm}" readonly/>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2">
                        <button class="btn btn-default" id="menuBtn" type="button">选择</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>标题：</label>
                    <div class="col-lg-10 col-md-10 col-sm-10">
                        <input id="title" type="text" class="form-control" name="title" placeholder="标题(不超过250)"  maxlength="250"  required value="${cmsArticle.title}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>内容：</label>
                    <div class="col-lg-10 col-md-10 col-sm-10">
                        <%--<textarea id="contentScript"  style="height:300px;"></textarea>--%>
                        <script id="contentScript" type="text/plain" style="height:300px;">${cmsArticle.content}</script>
                        <textarea id="content" class="form-control" name="content" style="display: none;"></textarea>
                        <textarea id="contentText" class="form-control" name="contentText" style="display: none;"></textarea>
                    </div>
                </div>
                <%--<div class="form-group">--%>
                    <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label">文章链接：</label>--%>
                    <%--<div class="col-lg-10 col-md-10 col-sm-10">--%>
                        <%--<textarea id="link" type="text" class="form-control" name="link"  placeholder="文章链接(不超过250)" maxlength="250" >${cmsArticle.link}</textarea>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="form-group">--%>
                    <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label">文章图片：</label>--%>
                    <%--<div class="col-lg-10 col-md-10 col-sm-10">--%>
                        <%--<input id="image" type="text" class="form-control" name="image" placeholder="文章图片" value="${cmsArticle.image}"  />--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="form-group">--%>
                    <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label">点击数：</label>--%>
                    <%--<div class="col-lg-10 col-md-10 col-sm-10">--%>
                        <%--<input id="hits" type="text" class="form-control" name="hits" placeholder="点击数" value="${cmsArticle.hits}"  />--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="form-group">--%>
                    <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label">关键字：</label>--%>
                    <%--<div class="col-lg-10 col-md-10 col-sm-10">--%>
                        <%--<textarea id="keywords" type="text" class="form-control" name="keywords" placeholder="关键字(不超过200)"  maxlength="200"  >${cmsArticle.keywords}</textarea>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="form-group">--%>
                    <%--<label class="col-lg-2 col-md-2 col-sm-2 control-label">描述、摘要：</label>--%>
                    <%--<div class="col-lg-10 col-md-10 col-sm-10">--%>
                        <%--<textarea id="description" type="text" class="form-control" name="description" placeholder="描述、摘要(不超过500)"  maxlength="500">${cmsArticle.description}</textarea>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <div class="form-group">
                    <label class="col-lg-2 col-md-2 col-sm-2 control-label">备注信息：</label>
                    <div class="col-lg-10 col-md-10 col-sm-10">
                        <textarea id="remarks" class="form-control" name="remarks" placeholder="备注信息(不超过250)" maxlength="250">${cmsArticle.remarks}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-10 col-md-10 col-sm-10">
                        <shiro:hasPermission name="cms:cmsArticle:update">
                            <button type="button" class="btn btn-s-md btn-info" onclick="updatecmsArticle()">保存</button>
                        </shiro:hasPermission>
                        <button type="button" class="btn btn-s-md btn-danger" onclick="closeSelfModel()">关闭</button>
                    </div>
                </div>
            </div>
        </section>
    </form>
</section>
<div id="menuContent" class="menuContent" style="display:none;position: absolute;z-index: 10000;background-color: #eee;border: 1px solid #ccc;">
    <style>
        .line {
            height: auto;
        }
    </style>
    <%--这个不能删除--%>
    <ul id="tree" class="ztree" style="margin-top:0;"></ul>
</div>
</body>

<script src="${ctxStatic}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctxStatic}/js/bootstrap.js"></script>
<!-- App -->
<script src="${ctxStatic}/js/app.js"></script>
<script src="${ctxStatic}/js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctxStatic}/js/app.plugin.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/demo.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tools.js?version=${ctxVersion}"></script>
<script type="text/javascript" src="${ctxStatic}/js/page/paging.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tmpl/jquery.tmpl.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/layui/layui.all.js"></script>
<script src="${ctxStatic}/js/ztree/js/jquery.ztree.core-3.5.min.js"></script>

<script type="text/javascript" charset="utf-8" src="${ctxStatic}/js/uEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/js/uEditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/js/uEditor/lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('contentScript');
</script>


<script>
    $(function(){
        var msg = '${msg}';
        if(msg!=''){
            showMsg(msg);
        }

    })

    function updatecmsArticle(){
        var html = ue.getContent();
        var txt = ue.getContentTxt();
        $("#content").val(html);
        $("#contentText").val(txt);
        if(isBlankCheck("categoryNm,title,content","栏目名称,标题,内容")){
            var loadingLayer = layer.load(1, {shade: [0.1, '#fff']});//loading
            //根据项目标识获取目录
            $.ajax({
                type: 'post',
                url: '${ctx}/cms/cmsArticle/update.json?timeStamp=' + new Date().getTime(),
                dataType: "json",
                data: $("#cmsArticleForm").serialize(),
                success: function (data) {
                    layer.close(loadingLayer);
                    showMsg(data.desc, function () {
                        if (data.ret == 1) {//成功
                            location.href = "${ctx}/cms/cmsArticle/update?id=" + data.data;
                        }
                    });
                }, error: function () {
                    layer.close(loadingLayer);
                    showMsg("点击过快或程序异常");
                }
            });
        }
    }

    /** 关闭当前弹出框并执行 */
    function closeSelfModel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.searchPage(1);//执行父页面的搜索功能
        parent.layer.close(index);
    }
</script>
<script>
    $(function(){
        var setting2 = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        //初始化ztree选择
        $.fn.ztreeSelect=function(tree,zNodes){
            var ztree = $.fn.zTree.init(tree, setting2, zNodes);
            ztree.expandAll(true);//默认展开
        }

        //点击事件
        function onClick(e, treeId, treeNode) {
            //点击回调方法
            ztreeOnClickCall && ztreeOnClickCall(treeNode);
            $("#categoryNm").val(treeNode.name);
            hideMenu();
        }

        function showMenu() {
            var cityObj = $("#categoryId");
            var cityOffset = $("#categoryNm").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px",
                top: cityOffset.top + cityObj.outerHeight() + "px"
            }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }
        $("#menuBtn").click(showMenu);
    })
    $(function(){

        //资源树选择
        var zNodes =[
            <c:forEach items="${cmsCategoryList}" var="o" varStatus="status">
            { id:"${o.id}", pId:"${o.parentId}", name:"${o.name}", open:true}<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];
        $.fn.ztreeSelect($("#tree"),zNodes);
    })
    //ztree资源点击回调
    function ztreeOnClickCall(treeNode){
        $("#categoryId").val(treeNode.id);
    }
</script>

</html>
